<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- 1.讲解v-text和v-html指令
        2.对比{{}} v-text  v-html

        v-html 能够解析标签，其他两个不能{{}}闪屏效果

        v-text 白屏 -->

        <!-- 1. {{}} -->
        <div>num:{{ num }}</div>
        <div>str:{{ str }}</div>
        <hr>
        <!-- 2.v-text -->
        <div v-text="num"></div>
        <div v-text="str"></div>
        <hr>
        <!-- 3. v-html 解析标签 -->
        <!-- <div v-html="num"></div>
        <div v-html="str"></div> -->
    </div>

    <script>
        new Vue({
            el:'#app',
            data:{
                num:10,
                str:'<h3>我是h3标签</h3>'
            }
        })
    </script>
</body>

</html>